import { FC, useEffect, useState, memo } from 'react';
import styles from './style.less';
import classnames from 'classnames';

import Image from '@/components/Image';
import InTable from '@/components/InTable';
import ScrollModel from '@/components/ScrollModel';

import closeBtn from '@/assets/close_btn.png';
import bluePoint from '@/assets/blue_point.png';
import noData from '@/assets/nodata.png';

import { useModel } from 'umi';

interface Iprops {
  visible: boolean;
  onClose: () => void;
  changeStauts: (v: any) => void;
}
const GlobalMessage: FC<Iprops> = (props) => {
  const { visible, onClose, changeStauts } = props;
  const [selfVisible, setSelfVisible] = useState<boolean>(false);
  const [currentInfo, setCurrentInfo] = useState<any>({
    title: '',
    time: '',
    content: '',
  });
  const { messageList, changePage, messageTotal } = useModel('globalMessage');

  useEffect(() => {
    const inter = setTimeout(() => {
      setSelfVisible(visible);
    }, 200);
    return () => {
      clearTimeout(inter);
    };
  }, [visible]);
  const toReadInfo = async (info: any) => {
    const { title, content, create_time } = info;
    setCurrentInfo({
      title: title || '',
      time: create_time || '',
      content: content || '',
    });
    if (info.status === '0') {
      changeStauts && changeStauts(info);
    }
  };
  const tableColumns: any[] = [
    {
      title: '消息',
      dataIndex: 'title',
      width: 429,
      render: (_: any, record: any) => (
        <p
          className={classnames(
            styles.table_row,
            record.status !== '0' ? styles.isread : null,
          )}
          onClick={() => {
            toReadInfo(record);
          }}
        >
          {record.status === '0' && <Image src={bluePoint} />}
          <span>{record.title}</span>
        </p>
      ),
    },
  ];

  return visible || selfVisible ? (
    <div className={styles.message_container}>
      <div
        className={classnames(
          styles.content,
          visible && selfVisible ? styles.open : null,
        )}
      >
        <Image src={closeBtn} className={styles.close_btn} onClick={onClose} />
        <div className={styles.title}>
          <span>系统消息</span>
        </div>
        {messageList && messageList.length > 0 ? (
          <>
            <div className={styles.left_content}>
              <InTable
                columns={tableColumns}
                dataSource={messageList}
                showHeader={false}
                total={messageTotal}
                onChange={(v) => {
                  console.log(v);
                  changePage(v);
                }}
              ></InTable>
            </div>
            <div className={styles.right_content}>
              {currentInfo && currentInfo.title && currentInfo.content ? (
                <div className={styles.info_warp}>
                  <ScrollModel height={540}>
                    <p className={styles.right_title}>{currentInfo.title}</p>
                    <p className={styles.right_time}>{currentInfo.time}</p>
                    <div
                      className={styles.right_info}
                      dangerouslySetInnerHTML={{ __html: currentInfo.content }}
                    ></div>
                  </ScrollModel>
                </div>
              ) : (
                <div className={styles.nodata}>
                  <Image src={noData} />
                </div>
              )}
            </div>
          </>
        ) : (
          <div className={styles.all_nodata}>
            <Image src={noData} />
          </div>
        )}
      </div>
    </div>
  ) : null;
};

export default memo(GlobalMessage);
